<template>
  <el-drawer :model-value="visible" title="预订信息" :size="mobile ? '100%' : 600" append-to-body lock-scroll @close="handleClose">
    <div class="primary-section room-header">
      <div class="font-w">朝花夕拾A101</div>
      <div>
        <el-button type="primary" @click="handleCheckin">办理入住</el-button>
        <el-button @click="handleCancelBook">退订</el-button>
      </div>
    </div>
    <section>
      <tai-title title="预订信息" class="mb10 mt20">
        <el-button link type="warning" @click="editClick('book')">编辑</el-button>
      </tai-title>
      <div class="primary-section not-bottom">
        <el-form :model="bookInfoForm">
          <el-row>
            <el-col :span="10">
              <el-form-item prop="renterName" label="姓名">{{ bookInfoForm.renterName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="idNumber" label="证件号">{{ bookInfoForm.idNumber || '- -' }}</el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="contacts" label="联系方式">{{ bookInfoForm.contacts }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="renterName" label="预定周期">{{ parseTime(bookInfoForm.startDate, '{y}-{m}-{d}') }}至{{ parseTime(bookInfoForm.endDate, '{y}-{m}-{d}') }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </section>
    <section>
      <tai-title title="备注" class="mb10 mt20">
        <el-button link type="warning" @click="editClick('remark')">编辑</el-button>
      </tai-title>
      <div class="primary-section pv-12">
        {{ bookInfoForm.remark }}
      </div>
    </section>
    <el-dialog title="编辑预订" v-if="bookVisible" v-model="bookVisible" width="550px" :fullscreen="mobile">
      <el-form :model="bookForm" ref="bookFormRef" :rules="bookFormRules" label-width="80px">
        <el-row :gutter="20" v-if="editType !== 'remark'">
          <el-col :span="12">
            <el-form-item label="姓名" prop="renterName">
              <el-input v-model="bookForm.renterName" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="contacts">
              <el-input v-model="bookForm.contacts" placeholder="请输入联系方式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="证件号" prop="idNumber">
              <el-input v-model="bookForm.idNumber" placeholder="请输入证件号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-icon class="mt10 ml10"><Wallet /></el-icon>
          </el-col>
          <el-col :span="24">
            <el-form-item label="入住周期" required>
              <el-row>
                <el-col :span="11">
                  <el-form-item label-width="0" prop="startDate">
                    <el-date-picker
                      v-model="bookForm.startDate"
                      :editable="false"
                      type="date"
                      placeholder="请选择开始日期"
                      value-format="YYYY-MM-DD HH:mm:ss"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <div style="text-align: center;">-</div>
                </el-col>
                <el-col :span="11">
                  <el-form-item label-width="0" prop="endDate">
                    <el-date-picker
                      v-model="bookForm.endDate"
                      type="date"
                      :editable="false"
                      placeholder="请选择结束日期"
                      value-format="YYYY-MM-DD HH:mm:ss"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="editType === 'remark'">
          <el-col :span="24" class="primary-select">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="bookForm.remark" :rows="4" maxlength="150" placeholder="请填写备注信息" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleBookClose">取消</el-button>
          <el-button type="primary" @click="handleBookOk">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-drawer>
</template>
<script setup name="BookDetail">
import useAppStore from '@/store/modules/app'
import { parseTime } from '@/utils/ruoyi'
import { useRouter } from 'vue-router'


const router = useRouter()
const { proxy } = getCurrentInstance()


const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  bookInfoForm: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const bookVisible = ref(false)
const editType = ref('book')
const mobile = computed(() => useAppStore().device === 'mobile')

const data = reactive({
  bookForm: {
    renterName: undefined,
    contacts: undefined,
    idNumber: undefined,
    startDate: '',
    endDate: '',
    remark: undefined
  },
  bookFormRules: {
    renterName: [{ required: true, message: "请输入名字", trigger: "blur" }],
    contacts: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
    startDate: [{ required: true, type: 'date', message: "请选择开始日期", trigger: "blur" }],
    endDate: [{ required: true, type: 'date', message: "请选择结束日期", trigger: ["blur"] }],
  }
})
const { bookForm, bookFormRules } = toRefs(data)

function editClick(type) {
  editType.value = type
  bookForm.value = { ...props.bookInfoForm }
  bookVisible.value = true
}

/* 预订编辑确认事件 */
function handleBookOk() {
  proxy.$refs['bookFormRef'].validate(valid => {
    if (valid) {
      let params = {}
      if (editType.value === 'remark') {
        params.id = bookForm.value.id
        params.remark = bookForm.value.remark
      } else {
        params = { ...bookForm.value }
        delete params.remark
      }
      emit('ok', params)
      console.log(params);
    }
  })
}

/* 办理入住 */
function handleCheckin() {
  bookVisible.value = false
  emit('linkto')
  router.push('/room/checkin')
}

/* 退订 */
function handleCancelBook() {
  proxy.$modal.confirm('确定操作退定？').then(function() {
    // 调用退订的接口
  }).then(() => {
    proxy.$modal.msgSuccess('退订成功');
  }).catch(function () {
    console.log('取消退订')
  })
}

function handleBookClose() {
  bookVisible.value = false
}

function handleClose() {
  emit('cancel')
}
</script>
<style lang="scss" scoped>
.room-header {
  margin-left: -20px;
  margin-right: -20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.cursor {
  cursor: pointer;
}
.not-bottom {
  .el-form-item--default {
    margin-bottom: 0;
  }
}
</style>